import React, { Component } from 'react';

class App extends Component {

  state = {
    img: ''
  }

  getFile = (e)=>{
    console.log(e.target.files[0]);
    // 先获取到选中的文件
    const file = e.target.files[0]


    // 方法一： 使用加载器  base64
    const reader = new FileReader()
    // 读取文件
    reader.readAsDataURL(file)
    // 文件读取成功之后的回调函数
    reader.onload = ()=>{
      // 读取成功后的内容放在 img 中
      this.setState({
        img: reader.result
      })
    }

  //  方法二：创建临时的URL地址
    // this.setState({
    //   img: URL.createObjectURL(file)
    // })

  }

  render() {
    return (
      <div>
        <input type="file" onChange={this.getFile} />
        
        <img src={this.state.img} alt='' />
      </div>
    );
  }
}

export default App;
